<template>
  <div class="config-container">
    <div v-if="!!title" class="config-title">{{ title }}</div>
    <div class="flex-wrap flex-row-center-start">
      <div
        class="config-item"
        v-for="(item, index) in dataSource"
        :key="index"
        :style="configItemStyle"
      >
        <img alt="config-img" class="config-img" :src="item[imgKey] || bannerDefaultImg" />
        <div class="config-btn">
          <Icon
            size="20"
            icon="carbon:edit"
            style="margin-right: 5px; cursor: pointer"
            @click="handleEdit(item.id)"
          />
          <Icon
            size="21"
            style="cursor: pointer"
            icon="ic:outline-delete"
            @click="handleDel(item.id)"
          />
        </div>
        <Icon
          size="30"
          v-if="!!index"
          class="config-sort-left"
          icon="icon-park-outline:to-left"
          @click="handleSort"
        />
        <Icon
          size="30"
          class="config-sort-right"
          icon="icon-park-outline:to-right"
          v-if="index !== dataSource.length - 1"
          @click="handleSort"
        />
      </div>
      <div
        class="upload-item flex-row-center-center"
        v-if="dataSource.length < maxUploadCount"
        @click="handleUpload"
        >点击上传
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Icon from '@/components/Icon/Icon.vue';
  import bannerDefaultImg from '@/assets/images/banner-default-img.png';

  defineProps({
    // 最大上传数量
    maxUploadCount: {
      type: Number,
      default: 4,
    },
    // 数据源
    dataSource: {
      type: Array<any>,
      default: () => {
        return [];
      },
    },
    // 标题
    title: {
      type: String,
      default: '',
    },
    // 配置项的行内样式
    configItemStyle: {
      type: Object,
      default: () => {
        return {
          width: '300px',
          height: '170px',
        };
      },
    },
    // 图片key
    imgKey: {
      type: String,
      default: 'url',
    },
  });
  const emits = defineEmits(['del', 'edit', 'sort', 'upload']);
  function handleUpload() {
    emits('upload');
  }
  function handleEdit(id: string) {
    emits('edit', id);
  }
  function handleDel(id: string) {
    emits('del', id);
  }
  function handleSort(item: any) {
    emits('sort', item);
  }
</script>

<style scoped lang="less">
  .config-container {
    .config-title {
      font-weight: bold;
      margin-bottom: 15px;
    }

    .upload-item {
      width: 100px;
      height: 100px;
      cursor: pointer;
      border: 1px dashed black;
    }

    .config-item {
      position: relative;
      margin-right: 15px;
      border-radius: 10px;

      .config-img {
        width: 100%;
        height: 100%;
      }

      .config-btn {
        top: 5px;
        right: 10px;
        position: absolute;
      }

      .config-sort-left {
        top: 50%;
        left: 10px;
        cursor: pointer;
        position: absolute;
        transform: translate(0, -50%);
      }

      .config-sort-right {
        top: 50%;
        right: 10px;
        cursor: pointer;
        position: absolute;
        transform: translate(0, -50%);
      }
    }
  }
</style>
